<script src="./font_setting.js"></script>
<style>
    .input-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin: 10px;
    }
</style>
<div>
    <!-- 输入弹窗配置 -->
    <div style="display: none;" id="input_popup">
        <div style="display: flex;flex-direction: column;">
            <div class="input-row">
                <span>限制字数：</span>
                <input style="width: 50px;" id="input_num" value="-1" />
                <span style="margin-left:10px;color:gray;">-1则为不限制</span>
            </div>
            <div class="input-row">
                <span>限制输入：</span>
                <select id="input_select_limit">
                    <option value="无">无</option>
                    <option value="纯数字">纯数字</option>
                    <option value="手机号">手机号</option>
                    <option value="邮箱">邮箱</option>
                    <option value="数字和字母">数字和字母</option>
                </select>
            </div>
            <div class="input-row">
                <span>类型选择：</span>
                <select id="input_select_type">
                    <option value="明文">明文</option>
                    <option value="密码">密码</option>
                </select>
            </div>
            <div class="input-row">
                <span>预设内容：</span>
                <input id="input_value" value="" placeholder="预设到输入框的内容" />
            </div>
            <div class="input-row">
                <span>提示内容：</span>
                <input id="input_placeholder" value="" placeholder="当输入框为空时的内容" />
            </div>
        </div>
        <div style="display: flex;flex-direction: row;justify-content: center;align-items: center;margin-bottom: 10px;">
            <button id="input_btn_reset">撤销插入</button>
            <button id="input_btn" style="margin-left: 10px;">插入</button></div>
    </div>
    <script>
        $('#input_btn_reset').click(
            function () {
                // $('#input_num').val('-1');
                // $('#input_select_limit').val('无');
                // $('#input_select_type').val('明文');
                // $('#input_value').val('');
                // $('#input_placeholder').val('');
                editor.getModel().undo();
            }
        )
        $('#input_btn').click(

            function () {
                var control = ""
                var input_num = $('#input_num').val();
                var input_select_limit = $('#input_select_limit option:selected').val();
                var input_select_type = $('#input_select_type option:selected').val();
                var input_value = $('#input_value').val();
                var input_placeholder = $('#input_placeholder').val();
                console.log(input_num, input_placeholder, input_select_limit, input_select_type, input_value)
                if (input_num != '-1') {
                    control = control + ` maxlength="${input_num}"`
                }
                if (input_select_type != "明文") {
                    control = control + ` type="password"`
                } else {
                    control = control + ` type="text"`
                }
                switch (input_select_limit) {
                    case "纯数字":
                        control = control + ` oninput = "value=value.replace(/[^\\d]/g,'')"`
                        break;
                    case "数字和字母":
                        control = control + ` oninput = "value=value.replace(/[^\\w\\.\\/]/ig,'')"`
                        break;
                    case "手机号":
                        control = control + ` oninput = "value=value.replace(/[^\\d]/g,'')"`
                        var input_script = `
<script>
    function isPhoneNum(str) {
        return /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/.test(str)
    }
    //判断是否手机号使用方法，传入str字符串，经过判断返回真/假
<\/script>
`
                        insert_to_editor(input_script);
                        break;
                    case "邮箱":
                        control = control + ` oninput = "value=value.replace(/[^\\w\\.\\/]/ig,'')"`
                        var input_script = `
<script>
    function isEmailAdress(str){
        var sReg = /[_a-zA-Z\d\-\.]+@[_a-zA-Z\d\-]+(\.[_a-zA-Z\d\-]+)+$/.test(str);
    }
    //判断是否邮箱使用方法，传入str字符串，经过判断返回真/假
<\/script>
`
                        insert_to_editor(input_script);
                        break;
                    default:
                        break;
                }
                var id = GenNonDuplicateID();
                var id2 = GenNonDuplicateID();
                var temp = `
<input id="${id}" ${control} placeholder="${input_placeholder}" value="${input_value}" >
<!-- 统计字数显示容器 -->
<div id="${id2}"></div>
 `
                var input_on_script = `
<script>
    //<!-- 统计字数并显示出来
    $("#${id}").bind("input propertychange", function () {
        $('#${id2}').html($(this).val().length);
    });
<\/script>
`
                    //标记内容停止一并加入撤销栈
                    editor.pushUndoStop();
                insert_to_editor(temp);
                insert_to_editor(input_on_script);

            }
        )
    </script>
    <!-- 字体弹窗配置 -->
    <div style="display: none;" id="text_popup">
        <link type="text/css" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/theme-chalk/index.css"
            rel="stylesheet">
        <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
        <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/index.js"></script>
            <div class="input-row">
                <span style="min-width: 70px;">文本内容：</span>
                <input style="width: 100%;" id="text_value" value="" placeholder="标签的文本内容" />
            </div>

        <div id="font_setting_text"></div>
        <script>
            makeFontSetting('font_setting_text','text');
            fontListenChange('text',function () {
                window['text_cb']();
            });

        </script>

        <div style="display: flex;flex-direction: row;justify-content: center;align-items: center;margin-bottom: 10px;">
            <button id="text_btn_reset">撤销插入</button>
            <!-- <button id="text_btn" style="margin-left: 10px;">确定</button> -->
        </div>
        <script type="text/javascript">

            //撤销
            $('#text_btn_reset').click(
                function () {
                    //fontSettingReset('text');
                    editor.getModel().undo();
                    editor.pushUndoStop();
                    insert_to_editor( window['text_value'] );
                }
            )
            window['text_cb']= function () {
                
                    editor.getModel().undo();
                    var text_size = $('#text_size').val();
                    var text_color = $('#text_color_show').html();
                    var text_value = $('#text_value').val();
                    var text_select_type = $('#text_select_type option:selected').val();
                    var text_select_align = $('#text_select_align option:selected').val();
                    var control = ""
                    control = control + `font-size:${text_size}px;`
                    control = control + `color:${text_color};`
                    if (window['text_blod'])
                        control = control + `font-weight:bold;`
                    if (window['text_underline'])
                        control = control + `text-decoration:underline;`
                    switch (text_select_type) {
                        case 'Serif 字体':
                            control = control + `font-family: serif;`
                            break;
                        case 'Sans-serif 字体':
                            control = control + `font-family: sans-serif;`
                            break;
                        case 'Monospace 字体':
                            control = control + `font-family: monospace;`
                            break;
                        case 'Cursive 字体':
                            control = control + `font-family: cursive;`
                            break;
                        case 'Fantasy 字体':
                            control = control + `font-family: fantasy;`
                            break;
                        default:
                            break;
                    }
                    switch (text_select_align) {
                        case '居左':
                            break;
                        case '居中':
                            control = control + `text-align: center;`
                            break;
                        case '居右':
                            control = control + `text-align: end;`
                            break;
                        default:
                            break;
                    }
                    var temp = `
<div style="${control}">${text_value}</div>
`                   
                    //标记内容停止一并加入撤销栈
                    editor.pushUndoStop();
                    insert_to_editor(temp);
                }
        </script>
    </div>

    <!-- <textarea>弹窗配置 -->
    <div style="display: none;" id="textarea_popup">
        <div style="display: flex;flex-direction: column;">
            <div class="input-row">
                <span>限制字数：</span>
                <input style="width: 50px;" id="textarea_num" value="-1" />
                <span style="margin-left:10px;color:gray;">-1则为不限制</span>
            </div>
            <div class="input-row">
                <span>区域宽度：</span>
                <input style="width: 50px;" id="textarea_width" value="100" />
                <span>px</span>
            </div>
            <div class="input-row">
                <span>区域高度：</span>
                <input style="width: 50px;" id="textarea_height" value="50" />
                <span>px</span>
            </div>
            <div class="input-row">
                <span>限制输入：</span>
                <select id="textarea_select_limit">
                    <option value="无">无</option>
                    <option value="纯数字">纯数字</option>
                    <option value="手机号">手机号</option>
                    <option value="邮箱">邮箱</option>
                    <option value="数字和字母">数字和字母</option>
                </select>
            </div>
            <div class="input-row">
                <span>类型选择：</span>
                <select id="textarea_select_type">
                    <option value="明文">明文</option>
                    <option value="密码">密码</option>
                </select>
            </div>
            <div class="input-row">
                <span>预设内容：</span>
                <input id="textarea_value" value="" placeholder="预设到输入框的内容" />
            </div>
            <div class="input-row">
                <span>提示内容：</span>
                <input id="textarea_placeholder" value="" placeholder="当输入框为空时的内容" />
            </div>
        </div>
        <div
            style="display: flex;flex-direction: row;justify-content: center;align-items: center;margin-bottom: 10px;">
            <button id="textarea_btn_reset">重置</button>
            <button id="textarea_btn" style="margin-left: 10px;">插入</button></div>
    </div>
    <script>
        $('#textarea_btn_reset').click(
            function () {
                $('#textarea_num').val('-1');
                $('#textarea_select_limit').val('无');
                $('#textarea_select_type').val('明文');
                $('#textarea_value').val('');
                $('#textarea_placeholder').val('');
                $('#textarea_height').val('50');
                $('#textarea_width').val('100');
            }
        )
        $('#textarea_btn').click(

            function () {
                var control = ""
                var textarea_num = $('#textarea_num').val();
                var textarea_select_limit = $('#textarea_select_limit option:selected').val();
                var textarea_select_type = $('#textarea_select_type option:selected').val();
                var textarea_value = $('#textarea_value').val();
                var textarea_placeholder = $('#textarea_placeholder').val();
                var textarea_height = $('#textarea_height').val();
                var textarea_width = $('#textarea_width').val();
                var style_control = '';
                if (textarea_height == "") {
                    style_control = style_control + `height:50px;`;
                } else {
                    style_control = style_control + `height:${textarea_height}px;`;
                }
                if (textarea_width == "") {
                    style_control = style_control + `width:100px;`;
                } else {
                    style_control = style_control + `width:${textarea_width}px;`;
                }
                if (textarea_num != '-1') {
                    control = control + ` maxlength="${textarea_num}"`
                }
                if (textarea_select_type != "明文") {
                    control = control + ` type="password"`
                } else {
                    control = control + ` type="text"`
                }
                switch (textarea_select_limit) {
                    case "纯数字":
                        control = control + ` oninput = "value=value.replace(/[^\\d]/g,'')"`
                        break;
                    case "数字和字母":
                        control = control + ` oninput = "value=value.replace(/[^\\w\\.\\/]/ig,'')"`
                        break;
                    case "手机号":
                        control = control + ` oninput = "value=value.replace(/[^\\d]/g,'')"`
                        var textarea_script = `
<script>
    function isPhoneNum(str) {
        return /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/.test(str)
    }
    //判断是否手机号使用方法，传入str字符串，经过判断返回真/假
<\/script>
`
                        insert_to_editor(textarea_script);
                        break;
                    case "邮箱":
                        control = control + ` oninput = "value=value.replace(/[^\\w\\.\\/]/ig,'')"`
                        var textarea_script = `
<script>
    function isEmailAdress(str){
        var sReg = /[_a-zA-Z\d\-\.]+@[_a-zA-Z\d\-]+(\.[_a-zA-Z\d\-]+)+$/.test(str);
    }
    //判断是否邮箱使用方法，传入str字符串，经过判断返回真/假
<\/script>
`
                        insert_to_editor(textarea_script);
                        break;
                    default:
                        break;
                }
                var id = GenNonDuplicateID();
                var id2 = GenNonDuplicateID();
                var temp = `
<textarea style="${style_control}" id="${id}" ${control} placeholder="${textarea_placeholder}" value="${textarea_value}" ><\/textarea>
<!-- 统计字数显示容器 -->
<div id="${id2}"></div>
 `
                var textarea_on_script = `
<script>
    //统计字数，并显示出来
    $("#${id}").bind("input propertychange", function () {
        $('#${id2}').html($(this).val().length);
    });
<\/script>
`
                    //标记内容停止一并加入撤销栈
                    editor.pushUndoStop();
                insert_to_editor(temp);
                insert_to_editor(textarea_on_script);
            }
        )
    </script>
    <!-- <textarea>按钮配置 -->
    <div style="display: none;" id="button_popup">
        <div class="input-row">
            <span>按钮标题：</span>
            <input id="button_title" value="" placeholder="按钮的标题"/>
        </div>
        <div class="input-row">
            <span>是否禁用：</span>
            <select id="button_select_type">
                <option value="可按">可按</option>
                <option value="禁用">禁用</option>
            </select>
        </div> 
        <div class="input-row">
            <span>对齐方式：</span>
            <select id="button_select_align">
                <option value="居左">居左</option>
                <option value="居中">居中</option>
                <option value="居右">居右</option>

            </select>
        </div>
        <div class="input-row">
            <span>预设样式：</span>
            <select id="button_select_style">
                <option value="默认">默认</option>
                <option value="bootstrap">bootstrap</option>
                <option value ="layui">layui</option>
                <option value="amazeui">amazeui</option>

            </select>
        </div>
        <div style="display: flex;flex-direction: row;justify-content: center;align-items: center;margin-bottom: 10px;">
            <button id="button_btn_reset">撤销插入</button>
            <button id="button_btn" style="margin-left: 10px;">插入</button>
        </div>        
    </div>
    <script>
        $('#button_btn_reset').click(
            function () {
                // $('#button_title').val('');
                // $('#button_select_type').val('可按');
                // $('#button_select_align').val('居左');
                // $('#button_select_style').val('默认');
                editor.getModel().undo();
            }
        )
        $('#button_btn').click(
            function () {
                var button_title =$('#button_title').val();
                var button_select_type = $('#button_select_type option:selected').val();
                var button_select_align = $('#button_select_align option:selected').val();
                var button_select_style = $('#button_select_style option:selected').val();
                var control_style =''
                var control_btn = ''
                var temp = ``
                var btn_code=``
                if(button_select_type == '禁用'){
                    control_btn = ` disabled="disabled"`
                }
                switch (button_select_style) {
                    case 'bootstrap':
                        if(selected_framework.indexOf('bootstrap')<=-1){
                            selected_framework.push('bootstrap')
                            madeImport(selected_framework);
                        }
                        control_btn =control_btn +` class="btn btn-primary"`;
                        break;
                    case 'layui':
                        if(selected_framework.indexOf('layui')<=-1){
                            selected_framework.push('layui')
                            madeImport(selected_framework);
                        }
                        control_btn =control_btn +` class="layui-btn"`;
                        break;
                    case 'amazeui':
                        if(selected_framework.indexOf('amazeui')<=-1){
                            selected_framework.push('amazeui')
                            madeImport(selected_framework);
                        }
                        control_btn =control_btn +` class="am-btn am-btn-default am-radius"`;
                        break;
                    default:
                        break;
                }
                btn_code = `<button type="button"  ${control_btn}>${button_title}</button>`
                switch (button_select_align) {
                    case '居左':
                        temp = `<div style="display: flex;flex-direction: row;justify-content: flex-start;align-items: center;">\n${btn_code}\n</div>`
                        break;
                    case '居中':
                        temp = `<div style="display: flex;flex-direction: row;justify-content: center;align-items: center;">\n${btn_code}\n</div>`
                        break;
                    case '居右':
                        temp = `<div style="display: flex;flex-direction: row;justify-content: flex-end;align-items: center;">\n${btn_code}\n</div>\n`
                        break;
                    default:
                        break;
                }
                                    //标记内容停止一并加入撤销栈
                                    editor.pushUndoStop();
                insert_to_editor(temp)
            }
        )
    </script>
    <!-- 标题配置 -->
    <div style="display: none;" id="title_popup">
        <div class="input-row">
            <span>标题内容：</span>
            <input id="title_title" value="" placeholder="请输入标题内容"/>
        </div>
        <div class="input-row">
            <span>标题大小：</span>
            <select id="title_select_size">
                <option value="h1">h1</option>
                <option value="h2">h2</option>
                <option value="h3">h3</option>
                <option value="h4">h4</option>
                <option value="h5">h5</option>
                <option value="h6">h6</option>
            </select>
        </div>
        <div id="font_setting1"></div>
        <script>
            makeFontSetting('font_setting1','title');
        </script>
        <div style="display: flex;flex-direction: row;justify-content: center;align-items: center;margin-bottom: 10px;">
            <button id="title_btn_reset">撤销插入</button>
            <button id="title_btn" style="margin-left: 10px;">插入</button>
        </div>
        <script>
            $('#title_btn_reset').click(
                function () {
                    //fontSettingReset('title');
                    editor.getModel().undo();
                }
            )
            $('#title_btn').click(
                function () {
                    var data =fontGetValues('title');
                    console.log(data);
                    var title_title = $('#title_title').val();
                    var title_select_size = $('#title_select_size option:selected').val();
                    var temp =`<${title_select_size} style="${data.control}">${title_title}</${title_select_size}>\n`
                                        //标记内容停止一并加入撤销栈
                                        editor.pushUndoStop();
                    insert_to_editor(temp);
                }
            )
        </script>  
    </div>
    <!-- p配置 -->
    <div style="display: none;" id="p_popup">
        <div class="input-row">
            <span>文本内容：</span>
            <textarea id="p_content"  style="width: 540px;height: 300px;"></textarea>
        </div>
        <div id="font_setting2"></div>
        <script>
            makeFontSetting('font_setting2','p');
        </script> 
        <div class="input-row">
            <span>自动排版：</span>
            <select id="p_select_sort">
                <option value="无">无</option>
                <option value="使用pre标签进行排版">使用pre标签进行排版</option>
                <option value="根据换行符进行排版">根据换行符进行排版</option>
            </select>
            <span>*自动排版的功能是进行段落分割。</span>
        </div>
        <div style="display: flex;flex-direction: row;justify-content: center;align-items: center;margin-bottom: 10px;">
            <button id="p_btn_reset">撤销插入</button>
            <button id="p_btn" style="margin-left: 10px;">插入</button>
        </div>        
    </div>
    <script>
            $('#p_btn_reset').click(
                function () {
                    //fontSettingReset('p');
                    editor.getModel().undo();
                }
            )
            $('#p_btn').click(
                function () {
                    var data_select = fontGetValues('p');
                    var p_content = $('#p_content').val();
                    var p_select_sort = $('#p_select_sort option:selected').val();
                    var temp="";
                    var times=1;
                    switch (p_select_sort) {
                        case '根据换行符进行排版':
                            var data = p_content.split('\n');
                            for (let i = 0; i < data.length; i++) {
                                if(data[i]!=""){

                                    temp=temp+`\n<!-- 第${times}段-->\n<p>\n\t${data[i]}\n</p>\n`
                                    times=times+1;
                                }
                            
                            }
                            temp =`<div style="${data_select.control}">\n`+temp+`</div>` 
                            break;
                        case '使用pre标签进行排版':
                            temp=`
<div style="padding:10px;">
    <pre style="${data_select.control}">
        ${p_content}
    </pre>
</div>`
                            break;
                        default:
                            temp =`<p>\n\t${p_content}\n</p>\n`
                            temp =`<div style="${data_select.control}">\n`+temp+`</div>` 
                            break;
                    }
                    //标记内容停止一并加入撤销栈
                    editor.pushUndoStop();
                    insert_to_editor(temp);
                }
            )

    </script>
</div>

    <!--page 页面配置 -->

    <!-- <div style="display: flex;flex-direction: row;align-items: center;margin: 10px;">
    <span>页面跳转：</span>
    <form class="layui-form" action="">
        <div class="layui-form-item" style="margin-bottom: 0px;">
            <div class="layui-input-block" style="display:flex;margin-left: 0px;">
            <input type="radio" lay-filter="page_choose" name="page_choose" value="原页面跳转" title="原页面跳转" checked>
            <input type="radio" lay-filter="page_choose" name="page_choose" value="打开新页面" title="打开新页面" >
            </div>
        </div>
    </form>
</div>
<div style="display: flex;flex-direction: row;justify-content: center;align-items: center;margin-bottom: 10px;">
    <button id="page_btn_reset">重置</button>
    <button id="page_btn" style="margin-left: 10px;">插入</button>
</div>    

            layui.use('form', function () {
        var form = layui.form;
        window['link_choose'] = {
            value: '原页面跳转'
        };
        form.on("radio(link_choose)", function (obj) {
            window['link_choose'] = obj;
            console.log(obj)
        })
    });

-->
    <div style="display: none;" id="page_popup">
        <div id='page_list'></div>
        <div style="display: flex;flex-direction: row;align-items: center;margin: 10px;">
            <span>页面跳转：</span>
            <form class="layui-form" action="">
                <div class="layui-form-item" style="margin-bottom: 0px;">
                    <div class="layui-input-block" style="display:flex;margin-left: 0px;">
                    <input type="radio" lay-filter="page_choose" name="page_choose" value="原页面跳转" title="原页面跳转" checked>
                    <input type="radio" lay-filter="page_choose" name="page_choose" value="打开新页面" title="打开新页面" >
                    </div>
                </div>
            </form>
        </div>
        <div style="display: flex;flex-direction: row;justify-content: center;align-items: center;margin-bottom: 10px;">
            <button id="page_btn_undo">撤销插入</button>
            <button id="page_btn" style="margin-left: 10px;">插入</button>
        </div>
    </div>

    <script>
            //撤销
            $('#page_btn_undo').click(
                function () {
                    //fontSettingReset('text');
                    
                    editor.getModel().undo();
                }
            )
        $('#page_btn').click(
            function () {
                var js_code='';
                console.log(window['page_info'])
                if(window['page_choose'].value =='原页面跳转'){
                    js_code="window.location.href='"+window['page_info'].ul_value.name+".html'";
                }else{
                    js_code="window.open('"+window['page_info'].ul_value.name+".html')";
                }
                var temp =`
<!-- 跳转到${window['page_info'].ul_value.desc} -->
<button onclick="${js_code}">跳转到${window['page_info'].ul_value.desc}</button>
`
                console.log(temp);
                //标记内容停止一并加入撤销栈
                editor.pushUndoStop();
                insert_to_editor(temp);
            }

        )
        layui.use('form', function () {
            var form = layui.form;
            window['page_choose'] = {
                value: '原页面跳转'
            };
            form.on("radio(page_choose)", function (obj) {
                window['page_choose'] = obj;
                console.log(obj)
            })
        });
$("#page_list").load("https://res.dcdev.net/dcdev/v1.0.8/assets/html/render_somthing.html", "",
            function () {
                data = {
                    // 容器div的id
                    id: "page_list",
                    // x表示横向滚动、y表示竖向滚动、block表示块状向下滚动
                    direction: "y",
                    search_config: {
                        enable: false,
                    },
                    //各个ul的hover配置
                    hover_config: {
                        enable: true,
                        style: "background-color:lightgray;"
                    },
                    // 每个ul的配置
                    ul_config: {
                        ul_class: "",
                        ul_style: "",
                    },
                    // 每个li的配置
                    li_config: {
                        // td 的函数配置
                        li_function: [{
                            field: "create_time",
                            type: "format_datetime",
                            format: "to-now",
                        },

                        ],
                        /*
                            字段变量使用 # 而不是 $ 来定义
                            如需唯一标识某个node，则添加data-key以作区分
                            如需多选，需添加一个固定标签：<div data-key="check_tag"></div>,选中及未选中样式，在check_config中配置
                        */
                        li_class: "",
                        li_style: "",
                        li_html: {
                            // 如果不设置条件渲染，则使用默认的html代码渲染
                            default: {
                                html: `
<div class="all" id="#{name}" data-key="edit_page" style="    border: solid 0.5px gray;">
    <div style="font-size:12px;    margin: 10px;"><a style="font-size:12px;color:gray;">页面：</ a>#{desc}</div>
    <div style="font-size:12px;    margin: 10px;"><a style="font-size:12px;color:gray;">文件：</ a>#{name}</div>
    <div style="font-size:12px;    margin: 10px;"><a style="font-size:12px;color:gray;">时间：</ a>#{create_time}</div>
</div>`,
                            }
                        }
                    },
                    // 各种类型的回调
                    cb_config: {
                        // 点击的回调
                        click: function (res) {
                            if (res.li_key == "edit_page") {
                                // 将项目信息加密存入
                                $('.all').css('background-color','white');
                                $('#'+res.ul_value.name).css('background-color','antiquewhite');
                                project_info.page_id = res.ul_value.name;
                                project_info.page_desc = res.ul_value.desc;
                                var key = md5(new Date().getTime());
                                var data = getAesString(JSON.stringify(project_info), key, key)
                                window['page_info']=res;
                                
                            }
                        },
                        // 获取数据之后的回调,如需提前干预可在此修改html之后返回
                        data_fetched: function (res) {
                            $(`#page_count`).html(`本项目页面数量：<a style="font-size:20px;color:red;">${res.all_data.length}</ a> 个`);
                            for (let index = 0; index < res.all_data.length; index++) {
                                res.all_data[index].desc = res.all_data[index].desc.replace(/\t/g, "&nbsp;&nbsp;&nbsp;&nbsp;");
                            }
                            return res;
                        },
                        // 拼接好html代码且渲染前的回调(data为该行的数据，html为准备渲染的html),如需提前干预可在此修改html之后返回
                        before_render: function (res) { },
                        // 所有数据加载完毕的回调
                        no_more: function (res) { },
                    },
                    // 请求及分页的配置
                    data_config: {
                        require: {
                            url: "https://www.dcdev.net/lib/lib_of_back_end/v1.0.1/api/dcdev/pages/get_page_list.php",
                            data: {
                                pid: project_info.pid,
                                __PAGE_NUMBER: 1,
                                __PAGE_COUNT: 100,
                            },
                            method: "post",
                            dataType: "json",
                            require_data_param: "data",
                            page_number_param: "__PAGE_NUMBER",
                            page_count_param: "__PAGE_COUNT",
                            data_count_param: "__COUNT",
                            search_keyword_param: "keyword",
                            pagination: {
                                enable: false,
                            }
                        },
                    },
                };
                new render_class().render(data, null, null)
            });
    </script>
<!-- 开发者工具浮窗 -->
<div style="display: none;" id="dev_popup">
    <div style="margin: 10px;">
        <span style="min-width: 100px;">匹配节点个数：</span>
        <span id='dev_num' style="color: red;">0</span>
    </div>
    <div style="margin: 10px;display: flex;flex-direction: row;justify-content: center;align-items: center;">
        <button onclick="previous_result()">上一个</button>
        <button onclick="next_result()">下一个</button>
    </div>
    <div style="margin: 10px;">
        <span style="min-width: 100px;">当前点击对象：</span>
        <textarea id="dev_content"  style="height: 200px;width:100%"></textarea>

    </div>
    <div style="margin: 10px;display: flex;flex-direction: column;justify-content: center;align-items: center;">
        <button onclick="console.log(window['CURRENT_DOM_CLICK'])">打印dom信息到控制台</button>
    </div>

</div>
<script>
    function next_result() {
        if(window['CURRENT_DOM_INDEX']+1<window['CURRENT_DOM_LENGTH']){
            window['CURRENT_DOM_INDEX']=window['CURRENT_DOM_INDEX']+1;
            select_by_range(window['CURRENT_DOM_DATA'][window['CURRENT_DOM_INDEX']].range);
            editor.revealLineInCenter(window['CURRENT_DOM_DATA'][window['CURRENT_DOM_INDEX']].range.startLineNumber);
            //免费移动到相应位置
        }
        
    }
    function previous_result() {
        if(window['CURRENT_DOM_INDEX']-1>=0){
            window['CURRENT_DOM_INDEX']=window['CURRENT_DOM_INDEX']-1;
            select_by_range(window['CURRENT_DOM_DATA'][window['CURRENT_DOM_INDEX']].range);
            editor.revealLineInCenter(window['CURRENT_DOM_DATA'][window['CURRENT_DOM_INDEX']].range.startLineNumber);
            //免费移动到相应位置
        }
        
    }
</script>
<!-- 其他浮窗窗配置 组件选择器 -->
<div style="display: none;" id='popup_setting_component'>
    <div ondrop="drop_handler(event);" ondragover="dragover_handler(event);"  id="setting_component" style="width: 100%;height: 100%;margin-bottom: 10px;"></div>
</div>
<div  style="display: none;" id="select_component_popup">
    <div class="layui-tab layui-tab-card" lay-filter="component_list">
        <ul class="layui-tab-title">
        <li class="layui-this">分类组件</li>
          <li >全部组件</li>
          <li>项目组件</li>
          <li>我用过的组件</li>
        </ul>
        <div class="layui-tab-content" >
         <!-- 组件分类 -->
          <div class="layui-tab-item layui-show">
            <div style="margin-left:10px;display: flex;flex-direction: column;padding-right: 10px;align-items: center;justify-content: center;">
                <div id="component_list" ></div>
                <hr>
                <div  id="component_list_2" ></div>
                
            </div>
            <div id="component_type_list2" class="xx-waterflow" style="margin-bottom:10px;display: flex;flex-direction: column;justify-content: center;align-items: center;"></div>
          </div>
            <!-- 全部组件 -->
          <div class="layui-tab-item ">
            <div >
                
                <div id="component_type_list" class="xx-waterflow" ></div>
            </div>
          </div>

          <!-- 历史记录 -->
          <div class="layui-tab-item">
            <div id="component_project_list" class="xx-waterflow" style="margin-bottom:10px;display: flex;flex-direction: column;justify-content: center;align-items: center;"></div>
            </div>
            <!-- 我用过的组件 -->
          <div class="layui-tab-item">
            <div id="component_project_by_uid" class="xx-waterflow" style="margin-bottom:10px;display: flex;flex-direction: column;justify-content: center;align-items: center;"></div>
          </div>
        </div>
      </div>
      <div id="component_container" ></div>
</div>
<script>
    //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function(){
      var element = layui.element;
        //监听Tab切换，以改变地址hash值
        element.on('tab(component_list)', function(res){
            console.log(res);
            switch (res.index) {
                case 1:
                    //加载全部组件
                    component_list_all();
                    break;
                case 2:
                    //加载项目组件
                    made_component_project_list();
                    break;
                case 3:
                    //加载我的组件
                    made_component_project_by_uid();
                default:
                    break;
            }
        });
      //…
    });
    </script>
</html>